<template>
    <div>
        <div :id="id" :style="{ width: '100%', height: 220 + 'px' }"></div>
    </div>
</template>
  
<script setup name="line">
import * as echarts from "echarts";
import useSettingsStore from '@/store/modules/settings'
import i18n from '@/lang'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const settingsStore = useSettingsStore()
// 主题颜色
const theme = computed(() => settingsStore.theme);
const props = defineProps({
    id: {
        default: ''
    },
    value: {
        default: {
            rx: [],
            tx: []
        },
        type: Object
    },
    width: {
        default: 200,
        type: Number
    },
    height: {
        default: 200,
        type: Number
    },
    title: {
        default: '',
        type: String
    }
})

let chart = null

watch(() => {
    return props.value;
}, (newValue, oldValue) => {
    if (chart) {
        chart.setOption({
            series: [{
                data: newValue.tx
            }, {
                data: newValue.rx
            }]
        })
    } else {
        initChart()
    }
}, { immediate: true, deep: true });

watch(() => {
    return locale.value
}, (newValue, oldValue) => {
    if (chart) {
        chart.setOption({
            legend: {
                data: [i18n.global.t('upward'), i18n.global.t('downward')],
            },
            series: [{ name: i18n.global.t('upward') }, { name: i18n.global.t('downward') }]
        })
    }
});

onMounted(() => {
    nextTick(() => {
        initChart({
        })
    })
})

function initChart() {
    let dom = document.getElementById(props.id)
    if (!dom) return
    chart = echarts.init(document.getElementById(props.id), "purple-passion");
    chart.setOption({
        animation: false,
        tooltip: {
            trigger: 'axis',
            // formatter: '{a}: {c0} kb/s<br />{a1}: {c1} kb/s',
            formatter: (params) => {
                return `${params[0].seriesName}: ${params[0].value > 1024 ? (params[0].value / 1024).toFixed(2) + 'Mb/s' : params[0].value + 'kb/s'} <br />${params[1].seriesName}: ${params[1].value > 1024 ? (params[1].value / 1024).toFixed(2) + 'Mb/s' : params[1].value + 'Kb/s'}`
            },
        },
        legend: {
            data: [i18n.global.t('upward'), i18n.global.t('downward')]
        },
        grid: {
            top: '15%',
            left: '10%',
            right: '5%',
            bottom: '5%'
        },
        xAxis: {
            show: false,
            type: 'category',
            boundaryGap: true
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                formatter: (value) => {
                    if (value > 1024) {
                        return (value / 1024).toFixed(2) + ' Mb/s';
                    } else {
                        return value + ' Kb/s';
                    }

                }
            }
        },
        series: [
            {
                name: i18n.global.t('upward'),
                data: [],
                type: 'line',
                itemStyle: {
                    color: HexToRgba(theme.value, 1)
                },
                areaStyle: {
                    color: HexToRgba(theme.value, 0.5)
                }
            },
            {
                name: i18n.global.t('downward'),
                data: [],
                type: 'line',
                itemStyle: {
                    color: '#ccc'
                },
                areaStyle: {
                    color: HexToRgba('#ccc', 0.5)
                }
            }
        ]
    });
    window.onresize = function () {
        chart.resize();
    };
}
function HexToRgba(str, a) {
    var r = /^\#?[0-9A-F]{6}$/;
    //test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
    if (!r.test(str)) return
    //replace替换查找的到的字符串
    str = str.replace("#", "");
    //match得到查询数组
    var hxs = str.match(/../g);
    //alert('bf:'+hxs)
    for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
    //alert(parseInt(80, 16))

    return `rgba(${hxs[0]},${hxs[1]},${hxs[2]},${a})`;
}
</script>
  
<style scoped lang="scss">
.title {
    text-align: center;
}
</style>
  
  